<template>
  <div class="container">
    <div class="wraper">
      <div class="box">
        <div class="left">
          <div class="title">
            出港航班计划
            <el-icon
                color="#409EFC"
                size="24"
                style="transform: translateY(6px);cursor: pointer"
                @click="ExportDep"
            >
              <Download/>
            </el-icon>
          </div>
          <div class="table">
            <scroll-table
                ref="tableD"
                class="tableCommon"
                :columns="flightColumns"
                :table-data="tableData_D"
                height="328"
                row-style="height:54px;font-size:13px;font-weight:500"
                @scroll="()=>{
                  queryListD();
}"
            >
              <template #stat="{row}">
                <el-button
                    style=" cursor: auto !important;"
                    size="default" plain v-if="row.stat=='起飞'||row.stat =='计划'" type="success">{{ row.stat }}
                </el-button>
                <el-button
                    style=" cursor: auto !important;"
                    size="default" plain v-else-if="row.stat=='延误'||row.stat =='提前取消'" type="danger">{{ row.stat }}
                </el-button>
              </template>
            </scroll-table>
          </div>
        </div>
        <el-divider direction="vertical" style="height: 380px"/>
        <div class="right">
          <div class="title">
            进港航班计划
            <el-icon
                color="#409EFC"
                size="24"
                style="transform: translateY(6px);cursor: pointer"
                @click="ExportArr"
            >
              <Download/>
            </el-icon>
          </div>
          <div class="table">
            <scroll-table
                ref="tableA"
                class="tableCommon"
                :columns="flightColumns2"
                :table-data="tableData_A"
                height="328"
                row-style="height:54px;font-size:13px;font-weight:500"
                @scroll="()=>{
                  queryListA();
}">
              <template #stat="{row}">
                <el-button size="default"
                           style=" cursor: auto !important;"
                           v-if="row.stat=='起飞'||row.stat =='计划'" type="success" plain>{{ row.stat }}
                </el-button>
                <el-button size="default"
                           style=" cursor: auto !important;"
                           v-else-if="row.stat=='延误'||row.stat =='提前取消'" type="danger" plain>{{ row.stat }}
                </el-button>
              </template>
            </scroll-table>
          </div>
        </div>
      </div>
      <div class="boxBottom" style="margin-top: 20px">
        <div class="title">
          地面保障计划
          <el-icon color="#409EFC" size="24" style="transform: translateY(6px);cursor: pointer"
                   @click="ExportPlan"
          >
            <Download/>
          </el-icon>
        </div>
        <div class="content">
          <div v-if="selectData.length === 0" style="width: 100%;background-color: #fff;text-align: center;">
            <el-empty :image-size="80" description="暂无数据"/>
          </div>
          <div class="block" v-for="(el, index) in selectData" :key="index" v-else>
              <div class="titleBottom">{{ el.ptcn }}</div>
              <div>
                <span class="des">执行人：</span
                ><span class="name" style="padding-left: 34px">
                <span v-for="p in el.tmcn" :key="p">
                  {{ p }}&nbsp;
                </span>
              </span>
              </div>
              <div>
                <span class="des">保障区域：</span
                ><span class="name">{{ el.grcn }}</span>
              </div>
              <div>
                <span class="des">保障目的：</span
                ><span class="name">{{ el.ptty }}</span>
              </div>
              <div>
                <span class="des">保障事项：</span><span class="name">{{ el.item }}</span>
              </div>
          </div>          
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {onMounted, ref, nextTick} from "vue";
import ScrollTable from "@/components/TableScroll";
import {flightColumns, flightColumns2} from "./config/columns";
import {queryList, depExport, arrExport, selectPlan, exportPlan} from '@/api/monitor/flight.ts'
import {arrIIII, tableData} from "./data.js"
import {ElMessage} from "element-plus";

// AD table当前页
let currentPageA = 0, currentPageD = 0;

// 出港进港两个表单的ref
const tableA = ref();
const tableD = ref();

// 第一个状态为起飞的行 到 顶部的高度
const distance_A = ref(0);
const distance_D = ref(0);

const tableData_A = ref([]) //进港数据
const tableData_D = ref([]) //入港
const selectData = ref([]) // 地面

/**
 获取当前时间
 api 要当前 yy-MM-DD 00:00:00
 导出文件要 yy-MM-DD
 通过 flag 区别
 @returns {string} 返回格式为 YYYY-MM-DD HH:mm:ss 的时间字符串
 zzvei
 */
const getCurrentTime = (flag = false) => {
  const currentDate = new Date();
  const year = currentDate.getFullYear();
  const month = String(currentDate.getMonth() + 1).padStart(2, '0');
  const date = String(currentDate.getDate()).padStart(2, '0');// 因为月份是从 0 开始计数的，所以要加 1;
  if (flag) {
    // 文件导出
    return `${year}-${month}-${date}`
  }
  // axios
  return `${year}-${month}-${date} 00:00:00`;
}

// 时间格式处理 , YYYY-MM-DD hh:mm:ss -> hh:mm
const TimeFormatter = (cellValue) => {
  if (cellValue && cellValue.trim() != '') {
    const time = new Date(cellValue);
    // 获取时间
    const hour = time.getHours();
    const minute = time.getMinutes();
    // 格式化时间
    return `${hour}:${minute}`;
  } else {
    return "-"
  }
}

// 找到第一个状态为起飞
const findFirstStat = arr => {
  for (let i = 0; i < arr.length; i++) {
    if (arr[i].stat == '起飞')
      return i;
  }
  return -1;
}
/**
 *  调用查询进港api
 * */
const queryListA = () => {
  queryList({
    currentDate: getCurrentTime(),
    flio: 'A',
    pageNum: currentPageA + 1,
    pageSize: 6
  }).then(res => {
    currentPageA++;
    console.log('res:', res.data)
    if(res.data.length > 0){
      tableData_A.value = tableData_A.value.concat(res.data)
    }
  }).catch(err => {
  })
}

//
const queryListD = () => {
  queryList({
    currentDate: getCurrentTime(),
    flio: 'D',
    pageNum: currentPageD + 1,
    pageSize: 6
  }).then(res => {
    currentPageD++;
    console.log('resD:', res.data)
    if(res.data.length > 0){
      tableData_D.value = tableData_D.value.concat(res.data)
    }

  }).catch(err => {
    console.log('报错啦', err)
  })
}

//出港导出
const ExportDep = () => {
  depExport({
    flio: 'D',
    currentDate: getCurrentTime(),
    pageNum: 1,
    pageSize: currentPageD  * 6
  }).then(res => {
    const Element_A = document.createElement('a')
    Element_A.href = URL.createObjectURL(new Blob([res]))
    Element_A.download = `出港航班计划${getCurrentTime(true)}.xlsx`
    Element_A.click()
  })
}

// 进港导出
const ExportArr = () => {
  arrExport({
    flio: 'A',
    currentDate: getCurrentTime(),
    pageNum: 1,
    pageSize: currentPageD * 6
  }).then(res => {
    const Element_A = document.createElement('a')
    Element_A.href = URL.createObjectURL(new Blob([res]))
    Element_A.download = `进港航班计划${getCurrentTime(true)}.xlsx`
    Element_A.click()
  })
}

// 地面导出
const ExportPlan = () => {
  exportPlan({
    currentDate: getCurrentTime(true)
  }).then(res => {
    const Element_A = document.createElement('a')
    Element_A.href = URL.createObjectURL(new Blob([res]))
    Element_A.download = `地面保障计划${getCurrentTime(true)}.xlsx`
    Element_A.click()
  })
}

// 地面保障查询
const SelectPlan = () => {
  selectPlan({
    currentTime: getCurrentTime(true)
  }).then(res => {
        selectData.value = res.data
      }
  ).catch(err => {
    console.log('报错拉:', err)
  })
}


onMounted(() => {
  queryListA();
  queryListD();

  // 自动滚动第一个状态为起飞的
  nextTick(() => {
    distance_A.value = findFirstStat(tableData_A.value);
    distance_D.value = findFirstStat(tableData_D.value)
    tableA.value.scrollTo(distance_A.value * 60)
    tableD.value.scrollTo(distance_D.value * 60)
  })

  SelectPlan();


})
</script>
<style lang="less" scoped>
* {
  box-sizing: border-box;
}

.el-table {
  padding: 0 !important;
}

.container {
  height: 85vh;
  //overflow: auto;
}

.box {
  display: flex;
  width: 100%;
}

.title {
  padding-left: 20px;
  color: #000;
  font-size: 1rem;
}

.left,
.right {
  width: 50%;
  overflow: auto;

  .tableCommon {
    overflow: auto;
  }

  .table-common {
    width: 100%;
    --el-table-header-bg-color: #f3f4f7;
    --el-table-header-text-color: #353a42;
    --el-table-row-hover-bg-color: #ebf7ff;
    --el-table-text-color: #535862;
  }
}

.table {
  padding: 20px;
  //overflow-y: auto;
}


.content {
  display: flex;
  flex-wrap: wrap;
  height: 360px;
  justify-content: left;
  margin-left: 20px;
  // display: grid;
  // gap: 20px;
  // grid-template-columns:1fr 1fr 1fr 1fr;
  // justify-content: space-between;
  // height: 200px;
  // width: 100%;
  overflow-y: auto;
  overflow-x: auto;
}

.block {
  display: inline-grid;
  width: 360px;
  height: 160px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  border: 1px solid #eee;
  padding-left: 20px;
  margin-right: 20px;

  .titleBottom {
    font-size: 15px;
    font-weight: 900;
    color: #000;
  }

  .titleBottom ~ div {
    font-size: 14px;
    font-weight: lighter;
    color: #7b7b7b;

    .name {
      color: #000;
      padding-left: 20px;
    }
  }
}
</style>
